import React from 'react';
import { Form, Input, Select, Button, Space, Table } from 'antd';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';

interface Variable {
  name: string;
  type: string;
  defaultValue?: any;
  description?: string;
}

interface VariableFormProps {
  variables: Variable[];
  onChange: (variables: Variable[]) => void;
}

const VariableForm: React.FC<VariableFormProps> = ({ variables, onChange }) => {
  const [form] = Form.useForm();

  const handleAdd = () => {
    form.validateFields().then(values => {
      onChange([...variables, values]);
      form.resetFields();
    });
  };

  const handleDelete = (index: number) => {
    const newVariables = [...variables];
    newVariables.splice(index, 1);
    onChange(newVariables);
  };

  const columns = [
    {
      title: '变量名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '默认值',
      dataIndex: 'defaultValue',
      key: 'defaultValue',
      render: (value: any) => {
        if (value === undefined || value === null) return '-';
        return typeof value === 'object' ? JSON.stringify(value) : String(value);
      },
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, __: any, index: number) => (
        <Button
          type="text"
          danger
          icon={<DeleteOutlined />}
          onClick={() => handleDelete(index)}
        />
      ),
    },
  ];

  return (
    <div>
      <Form form={form} layout="vertical">
        <Space>
          <Form.Item
            name="name"
            label="变量名"
            rules={[
              { required: true, message: '请输入变量名' },
              { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: '变量名必须以字母或下划线开头，只能包含字母、数字和下划线' }
            ]}
          >
            <Input placeholder="请输入变量名" />
          </Form.Item>

          <Form.Item
            name="type"
            label="类型"
            rules={[{ required: true, message: '请选择变量类型' }]}
          >
            <Select style={{ width: 120 }} placeholder="请选择类型">
              <Select.Option value="string">字符串</Select.Option>
              <Select.Option value="number">数字</Select.Option>
              <Select.Option value="boolean">布尔值</Select.Option>
              <Select.Option value="array">数组</Select.Option>
              <Select.Option value="object">对象</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="defaultValue"
            label="默认值"
          >
            <Input placeholder="请输入默认值" />
          </Form.Item>

          <Form.Item
            name="description"
            label="描述"
          >
            <Input placeholder="请输入描述" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
              添加变量
            </Button>
          </Form.Item>
        </Space>
      </Form>

      <Table
        columns={columns}
        dataSource={variables}
        rowKey={(record, index) => index.toString()}
        pagination={false}
        locale={{ emptyText: '暂无数据' }}
      />
    </div>
  );
};

export default VariableForm;